<template>
    <el-row v-for="(item, index) in optionsList" :key="index" :gutter="10" class="row">
        <el-col v-for="ite in item" :key="ite.key" :span="12" class="col">
            <div v-if="ite.type !== 'btns'" class="form-item">
                <span v-if="ite.label" class="label-name">{{ ite.label }}：</span>
                <el-input
                    v-if="ite.type === 'input'"
                    v-model="form[ite.key]"
                    :placeholder="ite.placeholder"
                    :prefix-icon="Search" />
            </div>
            <div v-else class="btns">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="clear">清空</el-button>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, inject } from 'vue';
import type { PropType } from 'vue';
import { ElButton, ElRow, ElCol, ElInput } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const searchOptions: any[] = inject('searchOptions', []);
const currentGroupId: number | string = inject('currentGroupId', 0);

const form = ref<any>({});

interface PropsType {
    modelValue: PropType<any>;
}

const props = withDefaults(defineProps<PropsType>(), {
    modelValue: () => ({})
});

const emits = defineEmits<{
    (e: 'update:modelValue', form: any): void;
    (e: 'search', form: any, flag?: boolean): void;
}>();

/**
 * @description: 处理search配置布局
 * @param {*} computed
 * @return {*}
 */
const optionsList = computed(() => {
    const btnOpts = { type: 'btns' };
    const opts = [...searchOptions, btnOpts];
    return opts.reduce((pre, cur, index) => {
        if (pre.length) {
            if (index % 2 === 0) {
                pre.push([cur]);
            } else {
                pre[pre.length - 1].push(cur);
            }
        } else {
            pre.push([cur]);
        }
        return pre;
    }, []);
});

watch(
    () => currentGroupId,
    () => reset()
);

/**
 * @description: 查询
 * @return {*}
 */
const search = () => {
    emits('update:modelValue', form.value);
    emits('search', form.value);
};

/**
 * @description: 清空
 * @return {*}
 */
const clear = () => {
    initFormData();
    emits('update:modelValue', form.value);
    emits('search', form.value, true);
};

/**
 * @description: 初始化search
 * @return {*}
 */
const initFormData = () => {
    searchOptions.forEach(item => {
        form.value[item.key] = item.value;
    });
};

/**
 * @description: 重置
 * @return {*}
 */
const reset = () => {
    initFormData();
    emits('update:modelValue', form.value);
};

onMounted(() => {
    initFormData();
});

defineExpose({
    reset
});
</script>
<style lang="scss" scoped>
.row {
    margin-bottom: 10px;
    justify-content: flex-end;

    .col {
        &:last-of-type {
            flex: 1;
            justify-content: flex-end;
        }

        .form-item {
            display: flex;
            align-items: center;

            .label-name {
                white-space: nowrap;
            }
        }

        .btns {
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
